<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Canvas Drawing</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <button id="zoom-in">放大</button>
    <button id="zoom-out">缩小</button>
    <script>
      let zoomInBtn = document.getElementById("zoom-in");
      let zoomOutBtn = document.getElementById("zoom-out");
      let canvas = document.getElementById("canvas");
      canvas.width = 510;
      canvas.height = 415;
      canvas.style.background = "black";
      let ctx = canvas.getContext("2d");
      // const img = new Image();
      //  img.crossOrigin = "Anonymous";
      // img.src = 'https://0028.wunuokeji.cn/uploads/20230321/4f7c4c5ecce6f4fdb4036d4b9aa4901d.jpeg';
      // img.onload = function() {
      //   const pattern = ctx.createPattern(img, 'repeat');
      //   ctx.fillStyle = pattern;
      //   ctx.fillRect(0, 0, canvas.width, canvas.height);
      // }
      let points = [];
      let isDrawing = true;
      let pointArr = [];
      let midleArr = [];
      canvas.addEventListener("mousedown", function (e) {
        if (e.button === 0) {
          if (isDrawing) {
            if (points.length === 3) {
              return;
            }
            points.push({ x: e.offsetX, y: e.offsetY });
            if (points.length > 1) {
              drawLine(points[points.length - 2], points[points.length - 1]);
            }
            if (points.length > 2) {
              calculateAngle(
                points[points.length - 2],
                points[points.length - 1],
                points[points.length - 3]
              );
              console.log(points);
              // drawAngleText(angle);
            }
          }
        } else if (e.button === 2) {
          let totalLength = 0;
          for (let i = 1; i < points.length; i++) {
            let length = Math.sqrt(
              Math.pow(points[i].x - points[i - 1].x, 2) +
                Math.pow(points[i].y - points[i - 1].y, 2)
            );
            totalLength += length;
            let lengthInMM = length * 0.264583;
            let midX = (points[i].x + points[i - 1].x) / 2;
            let midY = (points[i].y + points[i - 1].y) / 2;

            let tx = Math.abs(points[i].x - points[i - 1].x);
            let ty = Math.abs(points[i].y - points[i - 1].y);
            console.log(tx);
            console.log(ty);
            if (tx > ty) {
              ctx.fillStyle = "red";
              ctx.fillText(lengthInMM.toFixed(2) + "mm", midX, midY - 10);
            } else {
              ctx.fillStyle = "red";
              ctx.fillText(lengthInMM.toFixed(2) + "mm", midX + 10, midY);
            }
          }
          // ctx.fillText(`${(totalLength * 0.264583).toFixed(2)}mm`, points[0].x + 10, points[0].y + 10);
          points = [];
          isDrawing = false;
        }
      });
      function drawLine(start, end) {
        ctx.beginPath();
        ctx.moveTo(start.x, start.y);
        ctx.lineTo(end.x, end.y);
        ctx.strokeStyle = "red";
        ctx.stroke();
      }
      function calculateAngle(first, second, third) {
        const pointA = {
          x: third.x + ((first.x - third.x) * 7) / 8,
          y: third.y + ((first.y - third.y) * 7) / 8,
        };
        const pointB = {
          x: first.x + ((second.x - first.x) * 1) / 8,
          y: first.y + ((second.y - first.y) * 1) / 8,
        };
        const pointC = {
          x: third.x + ((first.x - third.x) * 3) / 4,
          y: third.y + ((first.y - third.y) * 3) / 4,
        };
        const pointD = {
          x: first.x + ((second.x - first.x) * 1) / 4,
          y: first.y + ((second.y - first.y) * 1) / 4,
        };
        const midel = {
          x: (pointC.x + pointD.x) / 2,
          y: (pointC.y + pointD.y) / 2,
        };
        const angle1 = Math.atan2(second.y - first.y, second.x - first.x);
        const angle2 = Math.atan2(third.y - first.y, third.x - first.x);
        let angle = angle2 - angle1;
        if (angle > Math.PI) {
          angle -= 2 * Math.PI;
        } else if (angle <= -Math.PI) {
          angle += 2 * Math.PI;
        }
        let angleNum = (angle * 180) / Math.PI;
        ctx.font = "10px Arial";
        ctx.fillStyle = "red";
        let fontX;
        console.log(Math.abs(angleNum.toFixed(2)));
        if (Math.abs(angleNum.toFixed(2)) > 89) {
          fontX = first.y - third.y > 0 ? first.y + 20 : first.y - 20;
        } else {
          fontX = first.y - third.y > 0 ? first.y + 10 : first.y - 10;
        }
        const angleNuma = Math.abs(angleNum.toFixed(2)) + "°";
        // ctx.fillText(angleNuma, midel.x, midel.y);
        ctx.fillText(angleNuma, first.x, fontX);
        drawArc(pointA, pointB, midel);
      }
      function drawArc(pointA, pointB, midel) {
        ctx.beginPath();
        ctx.moveTo(pointA.x, pointA.y);
        ctx.quadraticCurveTo(midel.x, midel.y, pointB.x, pointB.y);
        ctx.stroke();
      }

      // function drawAngleText(angle) {
      //   console.log(pointArr);
      //   drawArc(...pointArr);
      //   let midela = {
      //     x: (midleArr[0].x + midleArr[1].x) / 2,
      //     y: (midleArr[0].y + midleArr[1].y) / 2,
      //   };
      //   ctx.font = "10px Arial";
      //   ctx.fillStyle = "red";
      //   const angleNum = Math.abs(angle.toFixed(2)) + "°";
      //   ctx.fillText(angleNum, midela.x, midela.y);
      // }
      canvas.addEventListener("contextmenu", function (e) {
        e.preventDefault();
      });
      zoomInBtn.addEventListener("click", function () {
        let dataURL = canvas.toDataURL("image/png");
        let img = new Image();
        img.onload = function () {
          canvas.width *= 1.1;
          canvas.height *= 1.1;
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        };
        img.src = dataURL;
      });

      zoomOutBtn.addEventListener("click", function () {
        let dataURL = canvas.toDataURL("image/png");
        let img = new Image();
        img.onload = function () {
          canvas.width *= 0.9;
          canvas.height *= 0.9;
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        };
        img.src = dataURL;
      });
    </script>
  </body>
</html>
